<template>
<div>
    <Title title="为你推荐"></Title>
    <div class="Recommend" v-for="(item,index) in listData" :key="index" >
    <img src="./images/hot1.jpeg" alt="" />
    <div class="label">{{item.label}}</div>
    <div class="content">
        <div class="name">{{item.name}}</div>
         <div class="des">{{item.des}}</div>
          <div class="price">¥{{item.price}}</div>

    </div>
  </div>

</div>

</template>

<script>
import Title from "@/components/common/title";
export default {
  data() {
    return {
      listData: [
        {
          img: "./images/hot1.jpeg",
          label: "老铁推荐",
          name: "铁观音2號250g",
          des: "核心产区滋味正 ",
          price: "128",
        },
        {
          img: "./images/hot1.jpeg",
          label: "爆款",
          name: "正山小种3號150g",
          des: "难以忘怀的桂花香 ",
          price: "99",
        },
        {
          img: "./images/hot1.jpeg",
          label: "老铁推荐",
          name: "铁观音2號250g",
          des: "核心产区滋味正 ",
          price: "128",
        },
        {
          img: "./images/hot1.jpeg",
          label: "爆款",
          name: "正山小种3號150g",
          des: "难以忘怀的桂花香 ",
          price: "99",
        },
      ],
    };
  },
  methods:{
    
  },
   components: {  
    Title,
  },
};
</script>

<style scoped lang='scss'>
.Recommend {
  position: relative;
  border-radius: 3vw;
  overflow: hidden;
  width: 9.6829rem;
  height: 3.878rem;
  margin: 0 auto;
  margin-bottom: 0.2rem;
  .label {
    border-radius:0 0 2vw 2vw ;
    position: absolute;
    left: 0.4rem;
    top: 0;
    background-color: #D4C0A7;
    color: white;
    padding: 1vw;
    font-size: 4vw;
  }
  .content{
    text-align: right;
    padding-right: 0.4024rem;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  .name{
    font-size: 0.34rem;
  }
  .des{
    font-size: 0.4rem;

  }
  .price{
    font-size: 0.5rem;
    color: #b0352f;
    margin-top: 0.4878rem;

  }

  
}

img {
  z-index: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
</style>